<template>
	<view class="template-pay tn-safe-area-inset-bottom">

		<tn-nav-bar fixed :alpha="false" customBack backgroundColor="#DAE6FE">
			<text style="font-size: 40rpx;font-weight: bold;">首页</text>
		</tn-nav-bar>
		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}"
			style="background: linear-gradient(180deg, #D8E5FF, #F9FFF9);">
			<view class="tn-margin">
				<view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-blue">
					<view class="tn-margin-left tn-margin-top-lg">
						<view class="tn-color-white">
							营业总额
						</view>
						<view class="tn-color-white tn-padding-top-sm">
							<text class="" style="margin-left: -6rpx;">￥</text>
							<text class="tn-text-bold" style="font-size: 80rpx;">{{OrderSummary.value1}}</text>
						</view>
						<view @click="show = true" class="tn-color-white"
							style=" padding-top: 45rpx;opacity: 0.6; font-size: 30rpx;font-weight: bold;">
							<text class="icon tn-icon-calendar tn-color-white" style="padding: 10rpx;"></text>
							{{startDate}}至{{endDate}}
						</view>
					</view>
					<view class="tn-margin-right tn-margin-top-xl tn-color-white">
						<view style="margin: 10rpx 0;" class="tn-padding-bottom-xs">
							<text class="tn-padding-right-xs" style="opacity: 0.5;">维修</text>
							￥{{OrderSummary.value2}}
						</view>
						<view style="margin: 10rpx 0;" class="tn-padding-bottom-xs">
							<text class="tn-padding-right-xs" style="opacity: 0.5;">保养</text>
							￥{{OrderSummary.value3}}
						</view>
						<view style="margin: 10rpx 0;" class="tn-padding-bottom-xs">
							<text class="tn-padding-right-xs" style="opacity: 0.5;">喷漆</text>
							￥{{OrderSummary.value4}}
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-lg">
					订单状态
				</view>
			</view>
			<view class="" style="min-height: 500rpx;">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :canvas2d="true"
					canvasId="tbzJfkvZoBhocOsQKSWGXIQLsFfafmmL" />
			</view>
		</view>

		<view class="">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-lg">
					业绩排行
				</view>
			</view>
			<view class="" style="min-height: 500rpx;">
				<qiun-data-charts canvas2d type="bar" :opts="scoreOpts" :chartData="scoreChartData" />
			</view>
		</view>
		<view class="">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-lg">
					订单列表
				</view>
			</view>
		</view>
		<view class="order-list-box ">
			<tn-subsection :list="list" @change="tabchange"
				style="box-shadow: 2rpx 3rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);"></tn-subsection>
			<view class="order-list">
				<view class="box" v-for="(item,index) in OrderList">
					<view class="box-title">
						<text style="width: 70%;font-size: 35rpx;font-weight: bold;opacity: 0.8;">单号：{{item.no}}</text>
						<tn-tag :backgroundColor="tagcolor" fontColor="#FFFFFF">{{item.status}}</tn-tag>
						<tn-tag :backgroundColor="tagcolor" fontColor="#FFFFFF"
							style="margin-left: 10rpx;">{{item.car_lx}}</tn-tag>
					</view>
					<view class="box-content">
						<view class="box-content-img">
							<img src="@/static/img/order/car.jpg" alt="widthFix" />
						</view>
						<view class="box-content-text">
							<text>车牌号：{{item.car_code}}</text>
							<text>车架号：{{item.car_vin}}</text>
							<text>车主：{{item.user_name}}</text>
						</view>
					</view>
					<view class="box-money">

						<view class="box-money-box">
							<view class="box-money-box-datetiem">
								<text>开单日期：{{changeDate(item.Order_Time)}}</text>
							</view>
							<view class="box-money-box-text">
								<text style="font-size: 45rpx;margin: 5rpx;"
									class="icon tn-icon-money tn-color-yellowgreen"></text>
								<text style="color: #37A1F4;">{{item.all_money}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- Calendar -->
		<tn-calendar v-if="show" v-model="show" :mode="mode" :showLunar="showLunar" :activeBgColor="activeBgColor"
			:activeColor="activeColor" :rangeBgColor="rangeBgColor" :rangeColor="rangeColor" :btnColor="btnColor"
			:lunarColor="lunarColor" :startText="startText" :endText="endText" :toolTips="toolTips"
			:changeYear="changeYear" :changeMonth="changeMonth" @change="onChange"></tn-calendar>
	</view>
</template>

<script>
	import componentsListData from '@/mock/components_page.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import config from '@/common/config'

	export default {
		name: 'Components',
		mixins: [template_page_mixin],

		filters: {
			titleFilter(value) {
				if (value.length === 0) {
					return ''
				}
				let newString = ''
				for (let i = 0; i < value.length; i++) {
					if (i !== 0) {
						newString += ' / '
					}
					newString += value[i]
				}
				return newString
			}
		},
		data() {
			return {
				OrderSummary: {
					value1: 0,
					value2: 0,
					value3: 0,
					value4: 0,
				},
				OrderCount: {
					value1: 0,
					value2: 0,
					value3: 0,
					value: 0
				},
				tabstart: 0,
				OrderList: {},
				// nav菜单列表
				navList: componentsListData.data,
				show: false,
				mode: 'range',
				showLunar: true,
				activeBgColor: '#01BEFF',
				activeColor: '#FFFFFF',
				rangeBgColor: '#E6E6E655',
				rangeColor: '#01BEFF',
				btnColor: '#01BEFF',
				lunarColor: '#AAAAAA',
				startText: '开始',
				endText: '结束',
				toolTips: '请选择日期',
				changeYear: true,
				changeMonth: true,
				result: '',
				startDate: '',
				endDate: '',
				list: ['全部', '修车', '保养', '喷漆'],
				tagcolor: '#02BEFF',
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				scoreChartData: {},
				scoreOpts: {
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					enableScroll: true,
					padding: [15, 15, 0, 15],
					dataLabel: false,

					xAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						gridType: 'dash',
						itemCount: 5,

					},
					yAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						disabled: false,
						disableGrid: false,
						gridType: 'dash',
						format: "lengthlimit",
						min: 0,
						max: 10,

					},
					legend: {
						show: false,
						position: "top",
						float: "right",
					},
					extra: {
						bar: {
							type: "group",
							width: 16,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.04,
							categoryGap: 2
						}
					},
				},
			}
		},
		onReady() {

		},
		methods: {
			getRandomCoolBg() {
				return this.$tn.color.getRandomCoolBgClass()
			},
			onChange(res) {
				this.startDate = res.startDate;
				this.endDate = res.endDate;
				this.GetOrderSummary();
				this.GetOrderList();
			},
			tabchange(res) {
				this.tabstart = res.index;
				this.GetOrderList();
			},
			drawScoreCharts() {
				let res = {
					categories: ["张启宠", "浙江工商保险公司", "福建", "江苏", "江西", "其他"],
					series: [{
						name: "业绩",
						data: [{
							"value": 226,
							"color": "#FE871B"
						}, {
							"value": 204,
							"color": "#00D05E"
						}, {
							"value": 118,
							"color": "#FFAC00"
						}, {
							"value": 96,
							"color": "#FB6A67"
						}, {
							"value": 89,
							"color": "#957BFE"
						}, {
							"value": 66,
							"color": "#00B9FE"
						}],
						legendShape: "circle",
					}]
				};
				this.scoreChartData = JSON.parse(JSON.stringify(res));
			},
			GetOrderList() {

				var that = this;
				uni.request({

					url: config.Url + "/admin/phone/OrderList",
					method: "POST",
					data: {
						"StartTime": this.startDate,
						"EndTime": this.endDate,
						"token": config.Token,
						"start": this.tabstart
					},
					dataType: "json",
					complete(res) {
						if (res.data.code == 1) {
							that.OrderList = res.data.OrderList;
						} else {
							uni.redirectTo({
								url: "/pages/index/login"
							})
						}
					}
				})
			},
			GetOrderSummary() {
				var that = this;
				uni.request({
					url: config.Url + "/admin/phone/OrderSummary",
					method: "POST",
					data: {
						"StartTime": this.startDate,
						"EndTime": this.endDate,
						"token": config.Token,
					},
					dataType: "json",
					complete(res) {

						if (res.data.code == 1) {
							//汇总数据解析
							that.OrderSummary.value1 = res.data.Summary;

							for (let i = 0; i < res.data.Group.length; i++) {
								let val = res.data.Group[i]
								if (val.car_lx == "修车") {
									that.OrderSummary.value2 = val.value;
								}
								if (val.car_lx == "保养") {
									that.OrderSummary.value3 = val.value;
								}
								if (val.car_lx == "喷漆") {
									that.OrderSummary.value4 = val.value;
								}
							}
							//各类型订单数量解析
							for (let i = 0; i < res.data.OrderCount.length; i++) {
								let val = res.data.OrderCount[i]
								if (val.car_lx == "修车") {
									that.OrderCount.value1 = val.value;
								}
								if (val.car_lx == "保养") {
									that.OrderCount.value2 = val.value;
								}
								if (val.car_lx == "喷漆") {
									that.OrderCount.value3 = val.value;
								}
							}
							that.OrderCount.value = that.OrderCount.value1 + that.OrderCount.value2 + that
								.OrderCount.value3

							console.log(that.list);
							//饼图数据解析
							let cdata = {
								series: [{
									data: res.data.OrderType
								}]
							}
							that.chartData = JSON.parse(JSON.stringify(cdata));


							//条形图数据解析
							let saleslist = res.data.SalesList;
							let categories = []
							let datas = []
							let colors = ["#00B9FE", "#957BFE", "#FB6A67", "#FFAC00", "#00D05E",
								"#FE871B"
							]
							for (let i = 0; i < saleslist.length; i++) {

								if (saleslist[i].salesman == null || saleslist[i].salesman.length ==
									0) {

									categories.push('自然流量')
								} else {
									categories.push(saleslist[i].salesman)

								}
								datas.push({
									"value": saleslist[i].value,
									"color": colors[i % colors.length]
								})
							}


							let sdata = {
								categories: categories,
								series: [{
									name: '业绩',
									data: datas,
									legendShape: "circle",
								}]
							};
							that.scoreChartData = JSON.parse(JSON.stringify(sdata));

						} else {
							uni.redirectTo({
								url: "/pages/index/login"
							})
						}
					}
				})
			},
			changeDate(datetimes) {
				let date = new Date(datetimes * 1000);
				let Y = date.getFullYear() + '年';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
				let D = (date.getDate() + 1 < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1) + '日';

				return Y + M + D;
			}
		},
		mounted() {
			let time = (new Date()).getTime() - 24*60*60*1000*6
			this.startDate = new Date(time).toISOString().slice(0, 10);
			this.endDate = new Date().toISOString().slice(0, 10);

			this.GetOrderSummary();
			this.GetOrderList();
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}


	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(60rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 卡 */
	.button-vip {
		width: 100%;
		height: 300rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;

		&::after {
			content: " ";
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
			background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
		}
	}


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	.order-list-box {
		margin: 10rpx 30rpx;

		.charts-title {
			margin-left: 20rpx;
			font-size: 35rpx;
			font-weight: 800;
			margin-bottom: 20rpx;
		}

		.order-list {
			.box {
				border: 1rpx solid #e3e3e3;
				margin: 20rpx 0;
				padding: 20rpx 35rpx;
				border-radius: 10rpx;
				box-shadow: 2rpx 3rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);

				.box-title {
					display: flex;
				}

				.box-content {
					display: flex;
					margin-top: 10rpx;

					.box-content-img {
						margin: 10rpx;
						width: 120rpx;
						height: 120rpx;

						img {
							border-radius: 20rpx;
							width: 120rpx;
							height: 120rpx;
						}
					}

					.box-content-text {
						display: grid;
						margin-left: 20rpx;

						text {
							font-size: 30rpx;
							font-weight: 500;
							opacity: 0.8;
						}
					}
				}

				.box-money {
					.box-money-box-datetiem{
						margin: 0 10rpx;
						width: 70%;
						line-height: 60rpx;
					}
					.box-money-box{
						display: flex;
						.box-money-box-text {
							font-size: 40rpx;
							text-align: right;
							font-weight: 800;
							margin: 0 10rpx;
							width: 40%;
						}
					}

				}
			}
		}
	}

	.charts {
		margin: 20rpx;

		.charts-title {
			margin-left: 20rpx;
			font-size: 35rpx;
			font-weight: 800;
		}

		.charts-box {
			margin: 10rpx;
		}
	}

	/* 间隔线 end*/
</style>